<template>
	<div class="wrap">
		<Gheader :showheader="data"></Gheader>
		<scroll class="wrapper">
			<div class="inwrap">
				<!--头像-->
				<div class="header">
					<span>头像</span>
					<span><img :src="user.userheader" alt="" @click="gotoHeadportrait()" /><span>头像图片</span></span>
				</div>
				<!--下方内容-->
				<ul class="bottom">
					<!--昵称-->
					<li><span>昵称</span><span @click="gotoNikename()">{{user.username}}</span></li>
					<!--我的二维码-->
					<li><span>我的二维码</span><span @click="gotoQrcode()" class="bg"></span></li>
					<!--我的邀请码-->
					<li @click="gotoInvitecode()" ><span>我的邀请码</span><span ></span></li>
					<!--手机号-->
					<li><span>手机号</span><span @click="gotoMobilephone()">已绑定</span></li>
				</ul>
			</div>
		</scroll>
	</div>
	
</template>
<script>
	import Gheader from "../person-center/Gheader"
	import Scroll from "../../../../base/Scroll"
	export  default {
		name :"Information",
		data(){
			return{
				data:{
					word:"个人信息 ",
					left:[true,false,false],
					right:[false,false,false,false,false,false],
					leftword:"",
					rightword1:"",
					rightword2:"",
					jiantouurl:"/PersonalCenter/0"
				},
				name:"",
				user:{}
			}
		},
		components:{
			Gheader,
			Scroll
		},
		methods:{
			gotoHeadportrait:function () {
//				console.log(this.img)
				this.$router.push({path:"/Headportrait/"});	
			},
			gotoNikename:function  () {
				this.$router.push({path:"/Nikename/"});
			},
			gotoQrcode:function  () {
				this.$router.push({path:"/Qrcode/"});
			},
			gotoInvitecode:function  () {
				this.$router.push({path:"/Invitecode/"});
			},
			gotoMobilephone:function  () {
				this.$router.push({path:"/Mobilephone/"});
			}
		},
		computed:{
			listen(){
				return this.$store.state.personInfor
			}
		},
		watch:{
				listen:function(news,old){
					if(this.$store.state.personInfor.length!=0){
						this.user=this.$store.state.personInfor[0].login
					}
				}
		},
		mounted:function  () {
				if(this.$store.state.personInfor.length!=0){
					this.user=this.$store.state.personInfor[0].login
				}
		}
		
	}
</script>

<style scoped>
	.wrapper{
		overflow: hidden;
		height: 90vh;
	}
	.wrap{
		background: #F2F2F2;
		height: 100vh;
	}
	.inwrap{
		background: #F2F2F2;
		height: 90.1vh;
	}
	/*
	 * 头像
	 */
	.header{
		background: white;
		width: 94.4%;
		padding: 0 2.8%;
		height: 9.324vh;
		line-height: 9.324vh;
		color: #4d4d4d;
	}
	.header>span:nth-child(1){
		float: left;
		font-size: 1.256rem;
		display: inline-block;
		line-height:9.324vh;
	}
	.header>span:nth-child(2){
		display: inline-block;
		float: right;
		font-size: 1rem;
		padding-right: 4.5%;
		position: relative;
		background: url(../../../assets/G-img/箭头.png) no-repeat;
		background-size: 10% 25%;
		background-position: 100% 50%;
	}
	.header>span:nth-child(2) img{
		border-radius: 50%;
		display: inline-block;
		width: 4.292rem;
		height: 4.292rem;
		border: 1px solid #CCCCCC;
		margin-top:-2.146rem ;
		position: absolute;
		top: 50%;
		right: 20%;
	}
	/*
	 * <!--下方内容-->
	 */
	.bottom{
		background: white;
	}
	.bottom>li{
		width: 94.4%;
		padding: 0 2.8%;
		height: 6.757vh;
		line-break: 6.757vh;
		font-size: 1.256rem;
		color: #4d4d4d;
		border-top: 1px solid #CCCCCC; 
		background: url(../../../assets/G-img/箭头.png) no-repeat;
		background-size: 2% 30%;
		background-position: 97.2% 50%;
	}
	.bottom>li>span{
		line-height: 6.757vh;
	}
	.bottom>li>span:nth-child(1){
		float: left;
	}
	.bottom>li>span:nth-child(2){
		float: right;	
		margin-right: 4.246%;
	}
	.bottom>li .bg{
		height: 100%;
		display: inline-block;
		width: 4rem;
		background: url(../../../assets/G-img/我的二维码.png) no-repeat;
		background-size:2.5rem;
		background-position:100% 50%;
	}
</style>